<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../../css/mui.min.css">
		<link rel="stylesheet" href="../../static/css/common.css">
		<meta name="referrer" content="never" />
		<link rel="stylesheet" href="../../static/components/components.css" />
		<style>
			.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
				top:80px !important; 
			}
			.search-model{
				width:80%
				}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
			<a href="javacript:history.back(-1);"class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">交接班</h1>
			<span class="mui-icon mui-icon-right-nav mui-pull-right right-titleicon">
				+
			</span>
		</header>
		<div class="mui-content" id="content" v-cloak>
			<div style="background: #efeff4;z-index: 100;" id="myTop" class="top">
				<transition name="fade">
					<div class="drop-menulist" v-if="showMenu">
						<div @click="menuClick(item)" v-for="(item,index) in menuList" :key="index">
							{{item.name}}
						</div>
					</div>
				</transition>
				<div style="width: 100vw;" class="flex-row" >
					<div class="search-model">
						<div class="mui-input-row mui-search">
							<input type="search" @input="searchKey" v-model="searchData.keyWord" class="mui-input-clear" style="background-color: #fff;"
							 placeholder="请输入交接班信息">
						</div>
					</div>
					<div class="top-textall">
						<span @click="changeFliter('unreturn')" v-if="filterText == 'all'">全部</span>
						<span @click="changeFliter('return')" v-if="filterText == 'unreturn'">未确认</span>
						<span @click="changeFliter('all')" v-if="filterText == 'return'">已确认</span>
					</div>
				</div>
			</div>
			<div id="scroll">
				<div class="list" id="list">
					<div v-for="(item,index) in list" :key="index">

						<div class="flex-between">
							<div>
								<div class="flex-between">
									<div class="flex-row">
										<div>
											<span>交班:</span>
										</div>	
										<div class="item-title" style="color: #275EB1;max-width: 60vw;" @tap="navTo('handOver.html',item.workId)">{{`[${item.offGoingStaffCode}]${item.offGoingStaffName} ${item.offGoingTime}`}}</div>
									</div>
								</div>
								<div class="flex-between">
									<div class="flex-row">
										<div>
											<span>接班:</span>
										</div>
										<div>{{`[${item.onComingStaffCode}]${item.onComingStaffName} ${item.onComingTime?item.onComingTime:''}`}}</div>
									</div>

								</div>
							</div>
							<button class="cancel_btn" style="margin: 0;" v-if="item.status == '21'&&currentUser.userId ==item.offGoingStaffCode&&item.backNum==0"
							 @tap="del(item.changeShiftsId)">
								<span>删除</span>
							</button>
							<div class="flex-row" v-if="item.status == '32'">
								<span class="color-blue" v-if="item.status == 32&&item.onComingTime">已确认</span>
								<span class="color-red" v-if="item.status == 32&&!item.onComingTime">待确认</span>
							</div>
						</div>
					</div>
					<p style="width: 100%;height: 1px;"></p>
				</div>
			</div>
			<div class="popup-bg" v-if="showPop" @click="showPop = false">
				<div class="add-box" @click.stop="clickStop">
					<div class="flex-row user-form">
						<div class="pop-label">值班人</div>
						<personselect :issingle="isSingle" ref="personselect" style="width:40vw;"></personselect>
					</div>
					<div class="pop-bottom">
						<div class="color-blue">确认</div>
						<div class="color-red" @click="showPop = false">取消</div>
					</div>
				</div>
			</div>
			<!-- <div class="more-txt">上拉显示更多,下滑进行刷新</div>	 -->
		</div>
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../static/js/neiosCommon.js"></script>
		<!--公共js页面必需-->
		<script type="text/javascript" src="../../static/js/neiosRequst.js"></script>
		<script src="../../../../js/vue.js"></script>
		<script src="../../static/components/personSelect.js"></script>
		<script type="text/javascript" src="../../../../js/jquery-3.2.1.min.js"></script>
		<script src="js/index.js"></script>
	</body>

</html>
